<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>时间和金钱</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		*{
			padding: 0; margin: 0;
		}

		ul,li{
			list-style: none;
		}
	</style>
</head>

<body>
	<div id="app">
		<ul>
			<li v-for="item in timearr">{{item | myTime}}</li>
		</ul>
		<input type="number" v-model="money">{{money | mySwitchMoney}}
		<br/><button @click="switchMoney"><span v-if="CNY===true">美元</span><span v-if="CNY===false">人民币</span></button>
	</div>
	<script src="./js/vue.js"></script>
	<script>
		let app = new Vue({
			el: "#app",
			data: {
				timearr:['1579657789851','1563516693000','1578539380000'],
				money:"",
				CNY:true,
				USD:false
			},
			filters:{
				myTime:function(value){
					let d = new Date(Number(value))
					return d.getFullYear()+"年"+" "+(d.getMonth()+1)+"月"+" "+d.getUTCDate()+"日"+" "+d.getHours()+"时"+" "+d.getMinutes()+"分"+" "+d.getSeconds()+"秒"
				},
				mySwitchMoney:function(value){
					if(value==""){
						return ""
					}
					console.log(this)
					if(app.CNY){
						return "￥"+value
					}else{
						return "$"+value
					}
				}
			},
			methods:{
				switchMoney:function(){
						this.CNY = !this.CNY
						this.USD = !this.USD
				}
			}
		})
	</script>
</body>

</html>